<template>
  <div class="block-audio">
    <div v-if="status != 'upload-success'" class="block-progress">
      音频上传中...{{percentTip}}%
    </div>
    <audio-player v-else :path="block.path" :duration="block.duration" :size="block.size"></audio-player>
    <file-upload v-if="block.status == 'temp'" :path="block.path"
      :size="block.size"
      :meta="{duration: block.duration}"
      dir="materials/audios"
      @progress="onProgress"
      @start="status = 'uploading'"
      @success="onUploadSuccess"
    ></file-upload>
  </div>
</template>

<script>
import FileUpload from './file-upload'
import AudioPlayer from '@/components/audio-player'

export default {
  props: {
    block: {
      type: Object,
      default () {
        return {
          id: null,
          path: '',
          size: 0,
          status: '',
          type: 'audio',
          duration: 0
        }
      }
    }
  },
  components: {
    FileUpload,
    AudioPlayer
  },
  data () {
    return {
      percent: 0,
      material: {
        id: 0,
        type: 'audio',
        size: 0,
        key: '',
        meta: {
          duration: 0
        }
      }
    }
  },
  computed: {
    status () {
      if (this.block.status === 'enable') {
        return 'upload-success'
      }
      return 'temp'
    },
    percentTip () {
      return parseInt(this.percent * 100)
    }
  },
  methods: {
    onProgress (info) {
      this.percent = info.percent
    },
    onUploadSuccess (material) {
      this.material = material
      this.status = 'upload-success'
      this.$emit('upload-success', material)
    }
  }
}
</script>
